<template>
 <div class="box">
    <!--头像-->
    <div class="heart">

      <van-image round width="2rem" height="2rem"
        src="	https://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png" class="hea" />
      <div class="user">
        <span class="user_box1">用户</span><br>
        <span class="user_box1">普通用户</span>
      </div>

    </div>
    <!--资产-->
    <div class="money">
      <div class="money_box2">
        <h1 class="box3">我的资产</h1>
        <div class="money_box">
          <div class="tiem">
            <p class="count">
              <span>￥</span>
              <span> 0
                <span></span>
              </span>
            </p>
            <p class="name">余额</p>
          </div>
          <div class="tiem">
            <p class="count">
              <span>0
              </span>
            </p>
            <p class="name">红包</p>
          </div>
          <div class="tiem">
            <p class="count">

              <span> 0
              </span>
            </p>
            <p class="name">优惠券</p>
          </div>
          <div class="tiem">
            <p class="count">

              <span> 0

              </span>
            </p>
            <p class="name">积分</p>
          </div>
          <div class="tiem">
            <p class="count">
              <span> 0</span>
            </p>
            <p class="name">礼品卡</p>
          </div>
        </div>

      </div>
    </div>
    <!--表格-->
    <div class="table">
      <van-grid :border="true" :column-num="3" :center="true" class="icon">
        <van-grid-item class="icon_all">
          <van-icon name="notes-o" />
          <span class="icon_text">我的订单</span>
        </van-grid-item>
        <van-grid-item class="icon_all">
          <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
          <span class="icon_text">账号管理</span>
        </van-grid-item>

        <van-grid-item class="icon_all">
          <van-icon name="phone-circle-o" />
          <span class="icon_text">我的手机</span>
        </van-grid-item>

        <van-grid-item class="icon_all">
          <van-icon name="calendar-o" />
          <span class="icon_text">周末一起拼</span>
        </van-grid-item>

        <van-grid-item class="icon_all">
          <van-icon name="balance-pay" />
          <span class="icon_text">售后服务</span>
        </van-grid-item>

        <van-grid-item class="icon_all">

          <van-icon name="share-o" />
          <span class="icon_text">邀请返利</span>
        </van-grid-item>

        <van-grid-item class="icon_all">
          <van-icon name="bag-o" />
          <span class="icon_text">优先购</span>
        </van-grid-item>

        <van-grid-item class="icon_all">
          <van-icon name="gold-coin-o" />
          <span class="icon_text">积分中心</span>
        </van-grid-item>

        <van-grid-item class="icon_all">
          <van-icon name="vip-card-o" />
          <span class="icon_text">会员俱乐部</span>
        </van-grid-item>

        <van-grid-item class="icon_all">
          <van-icon name="location-o" />
          <span class="icon_text">地址管理</span>
        </van-grid-item>
        <van-grid-item class="icon_all">
          <van-icon name="shield-o" />
          <span class="icon_text">支付安全</span>
        </van-grid-item>
        <van-grid-item class="icon_all">
          <van-icon name="service-o" />
          <span class="icon_text">帮助与客服</span>
        </van-grid-item>
        <van-grid-item class="icon_all">
          <van-icon name="records" />
          <span class="icon_text">意见反馈</span>
        </van-grid-item>
        <van-grid-item class="icon_all">
          <van-icon name="bullhorn-o" />
          <span class="icon_text">我的竞拍</span>
        </van-grid-item>


      </van-grid>

    </div>
    <!---退出登录按钮-->
    <van-button type="primary" block size="large" color="black" to="home" @click="handler">退出登录</van-button>

  </div>
</template>
 
<script>
import Vue from 'vue';
import { Image as VanImage,Grid, GridItem,Button } from 'vant';

Vue.use(VanImage);
Vue.use(Grid);
Vue.use(GridItem)
Vue.use(Button);

export default {
  // 组件名字
  name: 'App',
  // 状态数据
  data() {
    return {}
  },
  methods:{
    handler(){
      this.$route.push({name:'login'})
      console.log(this.$route.path)
    }

  }

}
</script>
<style lang="less" scoped>
.heart {
  height: 2.7rem;
  background: #F1C577;
  padding: .3rem .2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-size: 100% 100%;
}

.hea {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: .2rem;

}

.user {
  flex: 1;
}

.user_box1 {
  flex-direction: column-reverse;
  font-weight: normal;
  font-size: .36rem;
  line-height: 1.2;
  text-align: left;
  margin-bottom: 0.1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

}

.money {
  height: 2.7rem;
  margin: 10px 0 10px 0;

}

.box3 {
  font-size: .28rem;
  align-items: center;
  justify-content: space-between;
  line-height: 1.04rem;
  margin-left: 0.3rem;
  text-align: left;
  border-bottom: 0.01rem solid #d9d9d9;
}

.money_box {
  display: flex;
  justify-content: space-around;
  margin-bottom: 0.04rem;
  font-size: .32rem;
  line-height: .48rem;
  font-weight: 700;

}

.money_box2 {
  display: flex;
  flex-direction: column;

}

.tiem {
  margin-top: 20px;
  align-items: center;
  font-size: 12px;

}

.span {
  justify-content: center;

}

icon_all {
  width: 100%;
  border: 1px solid #333;
  text-align: center;
}

.icon_text {

  font-size: .24rem;
  line-height: .34rem;
  color: #333;
  display: block;
  height: 1.8rem;
  padding-top: 0.45rem;
  text-align: center;

}

</style>